<template>
  <div class="dashboard-container">
    <!-- Header Section -->
    <div class="header-section">
      <div class="header-icon">🔬</div>
      <h1 class="main-title">精液动态分析报告</h1>
      <h2 class="sub-title">完整治疗历程数据可视化</h2>
      <div class="report-date">
        <span class="date-icon">📅</span>
        最新检测：2025年7月29日 | 治疗进展：5个月
      </div>
    </div>

    <!-- Patient Information Card -->
    <div class="patient-card">
      <div class="card-header">
        <div class="header-icon-small">👤</div>
        <h3>患者信息</h3>
      </div>
      <div class="info-grid">
        <div class="info-item">
          <div class="info-icon">📝</div>
          <div class="info-content">
            <span class="label">姓名</span>
            <span class="value">阿文</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">🎂</div>
          <div class="info-content">
            <span class="label">年龄</span>
            <span class="value">33岁</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">🏥</div>
          <div class="info-content">
            <span class="label">病历号</span>
            <span class="value">123456</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">⏰</div>
          <div class="info-content">
            <span class="label">禁欲天数</span>
            <span class="value">4天</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">📤</div>
          <div class="info-content">
            <span class="label">送检时间</span>
            <span class="value">2025年7月29日 15:15</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">📋</div>
          <div class="info-content">
            <span class="label">报告时间</span>
            <span class="value">2025年7月29日 15:47</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">🤏</div>
          <div class="info-content">
            <span class="label">采精方式</span>
            <span class="value">手淫</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">🏛️</div>
          <div class="info-content">
            <span class="label">检测机构</span>
            <span class="value">市中医院</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Physical Characteristics Card -->
    <div class="characteristics-card">
      <div class="card-header">
        <div class="header-icon-small">🧪</div>
        <h3>精液理化特征 (最新数据)</h3>
      </div>
      <div class="characteristics-grid">
        <div class="characteristic-item">
          <div class="char-icon">💧</div>
          <div class="char-content">
            <span class="label">精液量</span>
            <span class="value normal">2.00ml</span>
            <div class="status-indicator normal"></div>
          </div>
        </div>
        <div class="characteristic-item">
          <div class="char-icon">🌊</div>
          <div class="char-content">
            <span class="label">液化状态</span>
            <span class="value normal">完全液化</span>
            <div class="status-indicator normal"></div>
          </div>
        </div>
        <div class="characteristic-item">
          <div class="char-icon">⏱️</div>
          <div class="char-content">
            <span class="label">液化时间</span>
            <span class="value normal">30分钟</span>
            <div class="status-indicator normal"></div>
          </div>
        </div>
        <div class="characteristic-item">
          <div class="char-icon">⚖️</div>
          <div class="char-content">
            <span class="label">酸碱度(pH)</span>
            <span class="value normal">7.4</span>
            <div class="status-indicator normal"></div>
          </div>
        </div>
        <div class="characteristic-item">
          <div class="char-icon">🌡️</div>
          <div class="char-content">
            <span class="label">温度</span>
            <span class="value normal">36℃</span>
            <div class="status-indicator normal"></div>
          </div>
        </div>
        <div class="characteristic-item">
          <div class="char-icon">🎨</div>
          <div class="char-content">
            <span class="label">精液颜色</span>
            <span class="value normal">淡黄</span>
            <div class="status-indicator normal"></div>
          </div>
        </div>
        <div class="characteristic-item">
          <div class="char-icon">🫧</div>
          <div class="char-content">
            <span class="label">粘稠度</span>
            <span class="value normal">适中</span>
            <div class="status-indicator normal"></div>
          </div>
        </div>
        <div class="characteristic-item">
          <div class="char-icon">👃</div>
          <div class="char-content">
            <span class="label">精液气味</span>
            <span class="value normal">罂粟碱</span>
            <div class="status-indicator normal"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Enhanced Summary Section with Complete Timeline -->
    <div class="summary-section">
      <div class="section-header">
        <div class="header-icon-small">📈</div>
        <h3>完整治疗历程分析 (3月-7月)</h3>
      </div>
      
      <!-- Multi-Report Timeline with All 7 Tests -->
      <div class="timeline-section">
        <div class="timeline-header">
          <div class="timeline-icon">📅</div>
          <h4>7次检测完整记录</h4>
        </div>
        <div class="timeline-container">
          <div class="timeline-item active">
            <div class="timeline-date">7月29日</div>
            <div class="timeline-content">
              <div class="timeline-title">最新检测 ⭐</div>
              <div class="timeline-stats">
                <span class="stat">活动率: 44.59%</span>
                <span class="stat">密度: 18.52×10⁶/ml</span>
                <span class="stat">A级: 8.78%</span>
              </div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">6月29日</div>
            <div class="timeline-content">
              <div class="timeline-title">第6次复查</div>
              <div class="timeline-stats">
                <span class="stat">活动率: 18.24%</span>
                <span class="stat">密度: 17.4×10⁶/ml</span>
                <span class="stat">A级: 4.05%</span>
              </div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">6月8日</div>
            <div class="timeline-content">
              <div class="timeline-title">第5次复查</div>
              <div class="timeline-stats">
                <span class="stat">活动率: 22.98%</span>
                <span class="stat">密度: 16.9×10⁶/ml</span>
                <span class="stat">A级: 7.91%</span>
              </div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">5月25日</div>
            <div class="timeline-content">
              <div class="timeline-title">第4次复查</div>
              <div class="timeline-stats">
                <span class="stat">活动率: 38.67%</span>
                <span class="stat">密度: 15.8×10⁶/ml</span>
                <span class="stat">A级: 13.33%</span>
              </div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">5月5日</div>
            <div class="timeline-content">
              <div class="timeline-title">第3次复查</div>
              <div class="timeline-stats">
                <span class="stat">活动率: 35.00%</span>
                <span class="stat">密度: 31.7×10⁶/ml</span>
                <span class="stat">A级: 16.36%</span>
              </div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">4月13日</div>
            <div class="timeline-content">
              <div class="timeline-title">第2次复查</div>
              <div class="timeline-stats">
                <span class="stat">活动率: 24.77%</span>
                <span class="stat">密度: 24.7×10⁶/ml</span>
                <span class="stat">A级: 9.46%</span>
              </div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">3月23日</div>
            <div class="timeline-content">
              <div class="timeline-title">初次检测</div>
              <div class="timeline-stats">
                <span class="stat">活动率: 17.69%</span>
                <span class="stat">密度: 61.6×10⁶/ml</span>
                <span class="stat">A级: 2.53%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Comprehensive Trend Charts -->
      <div class="trend-charts">
        <div class="trend-chart-card">
          <div class="chart-header">
            <div class="chart-icon">📊</div>
            <h4>精子活动率完整趋势 (7次检测)</h4>
          </div>
          <v-chart class="trend-chart" :option="motilityTrendOption" />
        </div>
        
        <div class="trend-chart-card">
          <div class="chart-header">
            <div class="chart-icon">📈</div>
            <h4>精子密度完整趋势 (7次检测)</h4>
          </div>
          <v-chart class="trend-chart" :option="densityTrendOption" />
        </div>

        <div class="trend-chart-card">
          <div class="chart-header">
            <div class="chart-icon">🎯</div>
            <h4>A级精子活力趋势 (7次检测)</h4>
          </div>
          <v-chart class="trend-chart" :option="aGradeTrendOption" />
        </div>

        <div class="trend-chart-card">
          <div class="chart-header">
            <div class="chart-icon">💧</div>
            <h4>精液量变化趋势 (7次检测)</h4>
          </div>
          <v-chart class="trend-chart" :option="volumeTrendOption" />
        </div>
      </div>
      
      <!-- Summary Stats with Complete Data -->
      <div class="summary-stats">
        <div class="stat-card normal">
          <div class="stat-icon">✅</div>
          <div class="stat-content">
            <div class="stat-number">2</div>
            <div class="stat-label">正常指标</div>
          </div>
        </div>
        <div class="stat-card abnormal">
          <div class="stat-icon">⚠️</div>
          <div class="stat-content">
            <div class="stat-number">3</div>
            <div class="stat-label">异常指标</div>
          </div>
        </div>
        <div class="stat-card info">
          <div class="stat-icon">📊</div>
          <div class="stat-content">
            <div class="stat-number">44.59%</div>
            <div class="stat-label">最新活力</div>
          </div>
        </div>
        <div class="stat-card trend">
          <div class="stat-icon">📈</div>
          <div class="stat-content">
            <div class="stat-number">上升</div>
            <div class="stat-label">整体趋势</div>
          </div>
        </div>
        <div class="stat-card success">
          <div class="stat-icon">🎯</div>
          <div class="stat-content">
            <div class="stat-number">+152%</div>
            <div class="stat-label">活力提升</div>
          </div>
        </div>
        <div class="stat-card primary">
          <div class="stat-icon">📅</div>
          <div class="stat-content">
            <div class="stat-number">7次</div>
            <div class="stat-label">总检测数</div>
          </div>
        </div>
      </div>

      <!-- Current Status Summary -->
      <div class="summary-grid">
        <div class="summary-item-enhanced normal">
          <div class="status-badge normal">
            <div class="badge-icon">✅</div>
            <span>正常</span>
          </div>
          <div class="item-content">
            <div class="item-title">精液量</div>
            <div class="item-value">2.00ml</div>
            <div class="item-range">正常范围: ≥2.0ml</div>
          </div>
          <div class="progress-bar">
            <div class="progress-fill normal" style="width: 40%"></div>
          </div>
        </div>

        <div class="summary-item-enhanced normal">
          <div class="status-badge normal">
            <div class="badge-icon">✅</div>
            <span>正常</span>
          </div>
          <div class="item-content">
            <div class="item-title">pH值</div>
            <div class="item-value">7.4</div>
            <div class="item-range">正常范围: 7.2-8.0</div>
          </div>
          <div class="progress-bar">
            <div class="progress-fill normal" style="width: 25%"></div>
          </div>
        </div>

        <div class="summary-item-enhanced abnormal">
          <div class="status-badge abnormal">
            <div class="badge-icon">⚠️</div>
            <span>异常</span>
          </div>
          <div class="item-content">
            <div class="item-title">精子活动率</div>
            <div class="item-value">44.59%</div>
            <div class="item-range">正常范围: >60%</div>
          </div>
          <div class="progress-bar">
            <div class="progress-fill abnormal" style="width: 74.3%"></div>
          </div>
        </div>

        <div class="summary-item-enhanced abnormal">
          <div class="status-badge abnormal">
            <div class="badge-icon">⚠️</div>
            <span>异常</span>
          </div>
          <div class="item-content">
            <div class="item-title">精子活力 (A级)</div>
            <div class="item-value">8.78%</div>
            <div class="item-range">正常范围: ≥25%</div>
          </div>
          <div class="progress-bar">
            <div class="progress-fill abnormal" style="width: 35.1%"></div>
          </div>
        </div>

        <div class="summary-item-enhanced abnormal">
          <div class="status-badge abnormal">
            <div class="badge-icon">⚠️</div>
            <span>异常</span>
          </div>
          <div class="item-content">
            <div class="item-title">精子密度</div>
            <div class="item-value">18.52×10⁶/ml</div>
            <div class="item-range">正常范围: ≥20×10⁶/ml</div>
          </div>
          <div class="progress-bar">
            <div class="progress-fill abnormal" style="width: 92.6%"></div>
          </div>
        </div>
      </div>

      <!-- Comprehensive Analysis and Recommendations -->
      <div class="recommendations">
        <div class="rec-header">
          <div class="rec-icon">💡</div>
          <h4>基于7次检测的完整分析与建议</h4>
        </div>
        <div class="rec-content">
          <div class="rec-item">
            <div class="rec-bullet">📊</div>
            <span><strong>完整治疗效果：</strong>5个月7次检测显示活动率从17.69%显著提升至44.59%，改善幅度达152%，治疗效果卓越</span>
          </div>
          <div class="rec-item">
            <div class="rec-bullet">🎯</div>
            <span><strong>关键趋势分析：</strong>A级精子从2.53%提升至8.78%，密度从61.6稳定至18.52，整体参数持续优化</span>
          </div>
          <div class="rec-item">
            <div class="rec-bullet">⚡</div>
            <span><strong>治疗突破：</strong>最新检测创历史最高活动率44.59%，距离正常值60%仅差15.41%，预计2个月可达标</span>
          </div>
          <div class="rec-item">
            <div class="rec-bullet">💊</div>
            <span><strong>继续方案：</strong>当前治疗方案显著有效，建议维持现有药物治疗，继续营养补充和生活方式干预</span>
          </div>
          <div class="rec-item">
            <div class="rec-bullet">📈</div>
            <span><strong>乐观预期：</strong>按当前改善速度，预计8-9月份检测活动率有望突破50%，年底前达到正常标准</span>
          </div>
          <div class="rec-item">
            <div class="rec-bullet">📅</div>
            <span><strong>复查建议：</strong>鉴于治疗效果显著，建议6-8周后复查，如持续改善可适当延长复查间隔</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 精子活动率完整趋势图 (7次检测)
const motilityTrendOption = ref({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(50, 50, 50, 0.9)',
    borderColor: 'transparent',
    textStyle: {
      color: '#fff'
    }
  },
  legend: {
    data: ['精子活动率', '正常标准'],
    top: '5%',
    textStyle: {
      color: '#666'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '8%',
    top: '20%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['3月23日', '4月13日', '5月5日', '5月25日', '6月8日', '6月29日', '7月29日'],
    axisLabel: {
      color: '#666',
      fontSize: 10,
      rotate: 15
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0'
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '活动率(%)',
    nameTextStyle: {
      color: '#666'
    },
    axisLabel: {
      color: '#666'
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#f0f0f0'
      }
    }
  },
  series: [
    {
      name: '精子活动率',
      type: 'line',
      data: [17.69, 24.77, 35.00, 38.67, 22.98, 18.24, 44.59],
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#FF6B6B'
      },
      lineStyle: {
        color: '#FF6B6B',
        width: 3
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
            { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
          ]
        }
      }
    },
    {
      name: '正常标准',
      type: 'line',
      data: [60, 60, 60, 60, 60, 60, 60],
      smooth: false,
      symbol: 'none',
      lineStyle: {
        color: '#4CAF50',
        width: 2,
        type: 'dashed'
      }
    }
  ]
})

// 精子密度完整趋势图 (7次检测)
const densityTrendOption = ref({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(50, 50, 50, 0.9)',
    borderColor: 'transparent',
    textStyle: {
      color: '#fff'
    }
  },
  legend: {
    data: ['精子密度', '正常标准'],
    top: '5%',
    textStyle: {
      color: '#666'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '8%',
    top: '20%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['3月23日', '4月13日', '5月5日', '5月25日', '6月8日', '6月29日', '7月29日'],
    axisLabel: {
      color: '#666',
      fontSize: 10,
      rotate: 15
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0'
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '密度(×10⁶/ml)',
    nameTextStyle: {
      color: '#666'
    },
    axisLabel: {
      color: '#666'
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#f0f0f0'
      }
    }
  },
  series: [
    {
      name: '精子密度',
      type: 'line',
      data: [61.6, 24.7, 31.7, 15.8, 16.9, 17.4, 18.52],
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#2196F3'
      },
      lineStyle: {
        color: '#2196F3',
        width: 3
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(33, 150, 243, 0.3)' },
            { offset: 1, color: 'rgba(33, 150, 243, 0.1)' }
          ]
        }
      }
    },
    {
      name: '正常标准',
      type: 'line',
      data: [20, 20, 20, 20, 20, 20, 20],
      smooth: false,
      symbol: 'none',
      lineStyle: {
        color: '#4CAF50',
        width: 2,
        type: 'dashed'
      }
    }
  ]
})

// A级精子活力趋势图 (7次检测)
const aGradeTrendOption = ref({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(50, 50, 50, 0.9)',
    borderColor: 'transparent',
    textStyle: {
      color: '#fff'
    }
  },
  legend: {
    data: ['A级精子活力', '正常标准'],
    top: '5%',
    textStyle: {
      color: '#666'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '8%',
    top: '20%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['3月23日', '4月13日', '5月5日', '5月25日', '6月8日', '6月29日', '7月29日'],
    axisLabel: {
      color: '#666',
      fontSize: 10,
      rotate: 15
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0'
      }
    }
  },
  yAxis: {
    type: 'value',
    name: 'A级精子(%)',
    nameTextStyle: {
      color: '#666'
    },
    axisLabel: {
      color: '#666'
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#f0f0f0'
      }
    }
  },
  series: [
    {
      name: 'A级精子活力',
      type: 'line',
      data: [2.53, 9.46, 16.36, 13.33, 7.91, 4.05, 8.78],
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#4CAF50'
      },
      lineStyle: {
        color: '#4CAF50',
        width: 3
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(76, 175, 80, 0.3)' },
            { offset: 1, color: 'rgba(76, 175, 80, 0.1)' }
          ]
        }
      }
    },
    {
      name: '正常标准',
      type: 'line',
      data: [25, 25, 25, 25, 25, 25, 25],
      smooth: false,
      symbol: 'none',
      lineStyle: {
        color: '#FFA726',
        width: 2,
        type: 'dashed'
      }
    }
  ]
})

// 精液量变化趋势图 (7次检测)
const volumeTrendOption = ref({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(50, 50, 50, 0.9)',
    borderColor: 'transparent',
    textStyle: {
      color: '#fff'
    }
  },
  legend: {
    data: ['精液量', '正常标准'],
    top: '5%',
    textStyle: {
      color: '#666'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '8%',
    top: '20%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['3月23日', '4月13日', '5月5日', '5月25日', '6月8日', '6月29日', '7月29日'],
    axisLabel: {
      color: '#666',
      fontSize: 10,
      rotate: 15
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0'
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '精液量(ml)',
    nameTextStyle: {
      color: '#666'
    },
    axisLabel: {
      color: '#666'
    },
    axisLine: {
      lineStyle: {
        color: '#e0e0e0'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#f0f0f0'
      }
    }
  },
  series: [
    {
      name: '精液量',
      type: 'line',
      data: [4.50, 3.50, 3.00, 3.50, 5.00, 4.80, 2.00],
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#9C27B0'
      },
      lineStyle: {
        color: '#9C27B0',
        width: 3
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(156, 39, 176, 0.3)' },
            { offset: 1, color: 'rgba(156, 39, 176, 0.1)' }
          ]
        }
      }
    },
    {
      name: '正常标准',
      type: 'line',
      data: [2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0],
      smooth: false,
      symbol: 'none',
      lineStyle: {
        color: '#4CAF50',
        width: 2,
        type: 'dashed'
      }
    }
  ]
})

onMounted(() => {
  console.log('完整精液分析仪表板已加载 - 包含7次检测数据')
})
</script>

<style scoped>
/* 全局样式 */
.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header Section */
.header-section {
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.header-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.main-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 10px 0;
}

.sub-title {
  font-size: 1.2rem;
  color: #666;
  margin: 0 0 20px 0;
  font-weight: 400;
}

.report-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4ECDC4, #44A08D);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.date-icon {
  font-size: 1.2rem;
}

/* Card Styles */
.patient-card, .characteristics-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.header-icon-small {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.card-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
}

/* Info Grid */
.info-grid, .characteristics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.info-item, .characteristic-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.info-item:hover, .characteristic-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.info-icon, .char-icon {
  font-size: 1.5rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4ECDC4, #44A08D);
  box-shadow: 0 4px 10px rgba(78, 205, 196, 0.3);
}

.info-content, .char-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-content .label, .char-content .label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.info-content .value, .char-content .value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 10px;
}

.status-indicator.normal {
  background: linear-gradient(135deg, #4CAF50, #81C784);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.status-indicator.abnormal {
  background: linear-gradient(135deg, #F44336, #E57373);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
}

/* Summary Section */
.summary-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.section-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
}

/* Timeline Section */
.timeline-section {
  margin-bottom: 30px;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.timeline-icon {
  font-size: 1.3rem;
  background: linear-gradient(135deg, #FF9800, #FFB74D);
  color: white;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(244, 159, 66, 0.3);
}

.timeline-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.timeline-container {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.timeline-item {
  flex: 0 0 auto;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 20px;
  background: #f0f0f0;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.timeline-item:hover {
  background: #e0e0e0;
  border-color: #ccc;
}

.timeline-item.active {
  background: linear-gradient(135deg, #4CAF50, #81C784);
  color: white;
  border-color: #4CAF50;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.timeline-item.active:hover {
  background: linear-gradient(135deg, #4CAF50, #81C784);
  color: white;
  border-color: #4CAF50;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.timeline-date {
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
  text-align: center;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}

.timeline-item.active .timeline-date {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  text-align: center;
}

.timeline-item.active .timeline-title {
  color: white;
}

.timeline-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.8rem;
  color: #666;
}

.timeline-item.active .timeline-stats {
  color: rgba(255, 255, 255, 0.9);
}

.stat {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Trend Charts */
.trend-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.trend-chart-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.trend-chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.chart-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.chart-icon {
  font-size: 1.3rem;
  width: 35px;
  height: 35px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
  color: white;
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}

.chart-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.trend-chart {
  height: 320px;
  width: 100%;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card.normal {
  background: linear-gradient(135deg, #4CAF50, #81C784);
  color: white;
}

.stat-card.abnormal {
  background: linear-gradient(135deg, #F44336, #E57373);
  color: white;
}

.stat-card.info {
  background: linear-gradient(135deg, #2196F3, #64B5F6);
  color: white;
}

.stat-card.trend {
  background: linear-gradient(135deg, #FF9800, #FFB74D);
  color: white;
}

.stat-card.success {
  background: linear-gradient(135deg, #8BC34A, #AED581);
  color: white;
}

.stat-card.primary {
  background: linear-gradient(135deg, #9C27B0, #CE93D8);
  color: white;
}

.stat-icon {
  font-size: 2rem;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.summary-item-enhanced {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.summary-item-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.status-badge.normal {
  background: linear-gradient(135deg, #4CAF50, #81C784);
  color: white;
}

.status-badge.abnormal {
  background: linear-gradient(135deg, #F44336, #E57373);
  color: white;
}

.badge-icon {
  font-size: 0.9rem;
}

.item-content {
  margin-bottom: 12px;
}

.item-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.item-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 4px;
}

.item-range {
  font-size: 0.8rem;
  color: #666;
}

.progress-bar {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s ease;
}

.progress-fill.normal {
  background: linear-gradient(90deg, #4CAF50, #81C784);
}

.progress-fill.abnormal {
  background: linear-gradient(90deg, #F44336, #E57373);
}

/* Recommendations */
.recommendations {
  background: linear-gradient(135deg, #E3F2FD, #F3E5F5);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid #E1F5FE;
}

.rec-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.rec-icon {
  font-size: 1.3rem;
  background: linear-gradient(135deg, #2196F3, #64B5F6);
  color: white;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rec-header h4 {
  margin: 0;
  color: #1976D2;
  font-weight: 600;
}

.rec-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rec-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
}

.rec-bullet {
  color: #2196F3;
  font-weight: bold;
  margin-top: 2px;
  font-size: 1.1rem;
  min-width: 20px;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .trend-charts {
    grid-template-columns: 1fr;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
  
  .timeline-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .timeline-item {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }
  
  .main-title {
    font-size: 2rem;
  }
  
  .info-grid, .characteristics-grid {
    grid-template-columns: 1fr;
  }
  
  .summary-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .trend-chart {
    height: 280px;
  }
}

@media (max-width: 480px) {
  .trend-charts {
    grid-template-columns: 1fr;
  }
  
  .trend-chart-card {
    padding: 15px;
  }
  
  .trend-chart {
    height: 250px;
  }
  
  .summary-stats {
    grid-template-columns: 1fr;
  }
}
</style> 